<template>
  <!--  仪表盘-->
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import * as echarts from 'echarts'
  import {debounce} from '@/utils'
  require('./spider') // echarts theme

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      optionTitleText: {
        type: String,
        default: ''
      },
      positiveNum: {
        type: Number,
        default: 0
      },
      negativeNum: {
        type: Number,
        default: 0
      },
      sum: {
        type: Number,
        default: 0
      },
    },
    watch:{
      optionTitleText(newValue,oldValue){
        this.opinion.title.text=newValue
        this.chart.setOption(this.opinion);
      },
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'spider')
        this.chart.setOption(
          {
            title: {
              text: this.optionTitleText,
              subtext:"共计"+this.sum+"条信息参与讨论",
              padding: 10,
            },
            backgroundColor: '#fff',
            series: [{
              type: 'gauge',
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#464646'
                }
              },
              axisLine: {

                lineStyle: {
                  width: 40
                }
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [{
                value: this.positiveNum,
                name: '正面',
                title: {
                  offsetCenter: ['0%', '-30%']
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '-15%']
                }
              },
                {
                  value: this.negativeNum,
                  name: '负面',
                  title: {
                    offsetCenter: ['0%', '0%']
                  },
                  detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '15%']
                  }
                }
              ],
              title: {
                fontSize: 14
              },
              detail: {
                width: 50,
                height: 14,
                fontSize: 14,
                color: 'auto',
                borderColor: 'auto',
                borderRadius: 20,
                borderWidth: 1,
                formatter: '{value}%'
              }
            }]
          }, true)
      }
    }
  }
</script>
